<template>
    <van-nav-bar title="商城" />
    <div class="home-page">

        <!-- 轮播图组件 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image" class="swipe-image" alt="Flower Image" />
            </van-swipe-item>
        </van-swipe>

        <van-card num="1" price="89.00" desc="描述信息" title="11朵香槟玫瑰"
            thumb="https://oss.huawa.com/shop/placeorder/07015473287544961.jpg" @click="toitem()">
        </van-card>

        <van-card num="1" price="83.00" desc="描述信息" title="爱莎玫瑰干花花束"
            thumb="https://gd-hbimg.huaban.com/52991381d79c8594092e288e104916016b8355a62aca5d-sK11du_fw658" @click="toitem()">
        </van-card>

        <van-card num="1"  price="83.00" desc="描述信息" title="向日葵花束"
            thumb="https://img.shetu66.com/2022/11/20/1668955826620543.jpg">
        </van-card>
        <!-- 底部导航栏 -->
        <Tabbar />
    </div>

</template>

<script setup>
import Tabbar from '@/components/common/Tabbar.vue';
import { useRouter } from 'vue-router';


const router =useRouter();
// 轮播图图片列表
const images = [
    'https://img.shetu66.com/2022/11/20/1668955882871207.jpg',
    'https://ts1.cn.mm.bing.net/th/id/R-C.0b8c6d3ab23d928ec65b927a134163ba?rik=6EnKmrPf%2f89Nqw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50058%2f1610.jpg_wh1200.jpg&ehk=Uhsh5pxKY1ZmM1%2buxEGz0kbECZ8mXcyTkYi4CPs7jSg%3d&risl=&pid=ImgRaw&r=0',
    'https://bpic.588ku.com/back_origin_min_pic/21/02/07/d8ff7509d0dba457ca624b26278f5a6a.jpg',
    'https://tse4-mm.cn.bing.net/th/id/OIP-C.vVekO1DrKgUVCfNepmFowgHaGH?rs=1&pid=ImgDetMain',

];
function toitem(){
    router.push({path:'/tz'})
}
</script>

<style scoped>
.home-page {
    flex-direction: column;
    height: 100vh;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.my-swipe {
    width: 100%;
    height: 200px;
    /* 根据需要调整高度 */
}

.swipe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-content {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}
</style>